<div>
	{{#if editReadingShortcutPagesConfig}}

		<div class="menu-simple-element menu-simple-element-little gamepad-item">
			<i class="material-icon menu-simple-icon-first" onclick="reading.loadReadingPages(false, false, document.querySelector('#reading-pages .tabs > div > div.active').dataset.name); reading.changePagesView(0);">arrow_back</i>
			<span>{{#compare _config.key '===' 0}}{{readingGlobalConfigName}}{{else}}{{_config.readingConfigName}}{{/compare}}</span>
			{{#compare _config.key '!==' 0}}<i class="material-icon menu-simple-icon" onclick="reading.removeReadingShortcutPagesConfig({{_config.key}});">delete</i>{{/compare}}
			<i class="material-icon menu-simple-icon-last" onclick="reading.editReadingShortcutPagesConfigName({{_config.key}});">edit</i>
		</div>

		{{#compare _config.key '!==' 0}}
		<div class="menu-simple-separator"></div>
		<div class="reading-labels">
			<div class="menu-simple-text reading-labels-title">
				<span>{{language.dialog.pages.readingConfigApplyToLabels}}</span>
			</div>
			<div class="menu-simple-text menu-grey reading-labels-empty"{{#if _config.labels}} style="display: none;"{{/if}}>
				<span>{{language.dialog.labels.empty}}</span>
			</div>
			<div class="reading-labels-list"{{#unless _config.labels}} style="display: none;"{{/unless}}>
			</div>
			<div class="simple-button filled-tonal gamepad-item" onclick="dom.labels.setShortcutPageConfigLabels();">
				<div class="touch-effect"><i class="icon-24 material-icon">add</i>{{language.dialog.labels.newLabel}}</div>
			</div>
			<cb></cb>
		</div>
		{{/compare}}

	{{else}}
		<div class="menu-simple-element menu-simple-element-little reading-shortcut-pages-config reading-shortcut-pages-config-0 gamepad-item" onclick="reading.setReadingShortcutPagesConfig(0);">
			<i class="material-icon menu-simple-icon-first">language</i>
			<span>{{readingGlobalConfigName}}</span>
			<i class="material-icon menu-simple-element-icon-select{{#compare _config.key '===' 0}} active{{/compare}}">check</i>
			<i class="material-icon menu-simple-icon-last" onclick="reading.editReadingShortcutPagesConfig(event, 0);">edit</i>
		</div>

		{{#each readingShortcutPagesConfig}}
		<div class="menu-simple-element menu-simple-element-little reading-shortcut-pages-config reading-shortcut-pages-config-{{key}} gamepad-item" onclick="reading.setReadingShortcutPagesConfig({{key}});">
			<i class="material-icon menu-simple-icon-first">palette</i>
			<span>{{readingConfigName}}</span>
			<i class="material-icon menu-simple-element-icon-select{{#compare @root._config.key '===' key}} active{{/compare}}">check</i>
			<i class="material-icon menu-simple-icon-last" onclick="reading.editReadingShortcutPagesConfig(event, {{key}});">edit</i>
		</div>
		{{/each}}
		<div class="menu-simple-element menu-simple-element-little gamepad-item" onclick="reading.newReadingShortcutPagesConfig();">
			<i class="material-icon menu-simple-icon-first">add</i>
			<span>{{language.reading.pages.readingConfigNew}}</span>
		</div>
	{{/if}}
	<div class="menu-simple-separator"></div>


	<div class="tabs outline-tabs" style="margin: 16px 24px;">
		<div>

			<div class="label-large gamepad-item{{#compare readingPagesTab '==' 'ebook-layout'}} gamepad-to-highlight active{{/compare}}" data-name="ebook-layout" data-on-end-animation="gamepad.updateBrowsableItems(gamepad.currentKey())">
				<span class="material-icon">format_size</span>{{language.reading.pages.ebookLayoutShort}}
			</div>

			<div class="label-large gamepad-item{{#compare readingPagesTab '==' 'page-layout'}} gamepad-to-highlight active{{/compare}}" data-name="page-layout" data-on-end-animation="gamepad.updateBrowsableItems(gamepad.currentKey())">
				<span class="material-icon">auto_stories</span>{{language.reading.pages.pageLayoutShort}}
			</div>

			<div class="label-large gamepad-item{{#compare readingPagesTab '==' 'filters'}} gamepad-to-highlight active{{/compare}}" data-name="filters" data-on-end-animation="gamepad.updateBrowsableItems(gamepad.currentKey())">
				<span class="material-icon">invert_colors</span>{{language.reading.pages.colorFiltersShort}}
			</div>

			<div class="label-large gamepad-item{{#compare readingPagesTab '==' 'ai'}} gamepad-to-highlight active{{/compare}}" data-name="ai" data-on-end-animation="gamepad.updateBrowsableItems(gamepad.currentKey())">
				<span class="material-icon">auto_awesome</span>{{language.reading.pages.aiToolsShort}}
			</div>

		</div>
	</div>

	<div class="tabs-content">
		<div class="tabs-ebook-layout{{#compare readingPagesTab '==' 'ebook-layout'}} active{{/compare}}">

			<div class="menu-simple-text gamepad-item">
				{{language.reading.pages.integrated}}
				<div class="switch{{#if _config.readingEbook.integrated}} a{{/if}}" on="reading.ebook.change('integrated', true, true)" off="reading.ebook.change('integrated', false, true)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="simple-slider simple-slider-min-disables reading-ebook-ratio gamepad-item{{#if _config.readingEbook.integrated}} disable-pointer{{/if}}" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.magnifyingGlass.ratio}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="1.4">undo</i><span>{{normalizeNumber _config.readingEbook.ratio "0.05"}}</span>:1</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="2" min="0.4" step="0.05" value="{{_config.readingEbook.ratio}}" onrange="reading.ebook.change('ratio', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="menu-simple-separator-min"></div>

			<div class="select reading-ebook-theme body-large gamepad-item have-select-wa" onclick="reading.ebook.getThemes(); events.showSelect(this, 'reading-ebook-theme', true);" style="height: 60px;">
				<div>
					<div class="select-border">
						<div class="bottom"><div></div></div>
					</div>
					<div class="text" style="opacity: 1;">{{readingEbookTheme}}</div>
					<div class="placeholder">{{language.reading.pages.ebookTheme}}</div>
					<i class="material-icon">arrow_drop_down</i>
				</div>
			</div>

			<div class="menu-simple-text reading-negative gamepad-item">
				{{language.reading.pages.negative}}
				<div class="switch{{#if _config.readingFilters.negative}} a{{/if}}" on="reading.filters.change('negative', true, true)" off="reading.filters.change('negative', false, true)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="menu-simple-separator-min"></div>

			<div class="menu-simple-text reading-chips reading-text-align" style="height: 32px; padding-top: 8px; padding-bottom: 0px;">

				<div class="chip label-large chip-icon-left reading-text-align-left gamepad-item{{#compare _config.readingEbook.textAlign '==' 'left'}} active{{/compare}}" onclick="reading.ebook.textAlign('left');">
					<div></div><i class="icon-18 material-icon" onclick="">format_align_left</i> {{language.reading.pages.textLeft}}
				</div>

				<div class="chip label-large chip-icon-left reading-text-align-center gamepad-item{{#compare _config.readingEbook.textAlign '==' 'center'}} active{{/compare}}" onclick="reading.ebook.textAlign('center')">
					<div></div><i class="icon-18 material-icon" onclick="">format_align_center</i> {{language.reading.pages.textCenter}}
				</div>

				<div class="chip label-large chip-icon-left reading-text-align-right gamepad-item{{#compare _config.readingEbook.textAlign '==' 'right'}} active{{/compare}}" onclick="reading.ebook.textAlign('right')">
					<div></div><i class="icon-18 material-icon" onclick="">format_align_right</i> {{language.reading.pages.textRight}}
				</div>

				<div class="chip label-large chip-icon-left reading-text-align-justify gamepad-item{{#compare _config.readingEbook.textAlign '==' 'justify'}} active{{/compare}}" onclick="reading.ebook.textAlign('justify')">
					<div></div><i class="icon-18 material-icon" onclick="">format_align_justify</i> {{language.reading.pages.textJustify}}
				</div>

			</div>

			<div class="menu-simple-text reading-chips" style="height: 32px; padding-top: 8px; padding-bottom: 16px;">

				<div class="chip label-large chip-icon-left reading-text-bold gamepad-item{{#compare _config.readingEbook.fontWeight '==' '700'}} active{{/compare}}" onclick="reading.ebook.bold();">
					<div></div><i class="icon-18 material-icon" onclick="">format_bold</i> {{language.reading.pages.bold}}
				</div>

				<div class="chip label-large chip-icon-left reading-text-italic gamepad-item{{#if _config.readingEbook.italic}} active{{/if}}" onclick="reading.ebook.italic()">
					<div></div><i class="icon-18 material-icon" onclick="">format_italic</i> {{language.reading.pages.italic}}
				</div>

			</div>

			<div class="select reading-ebook-font-family body-large gamepad-item have-select-wa" onclick="reading.ebook.getFonts(); events.showSelect(this, 'reading-ebook-font-family', true);">
				<div>
					<div class="select-border">
						<div class="bottom"><div></div></div>
					</div>
					<div class="text" style="opacity: 1;">{{readingFontFamily}}</div>
					<div class="placeholder">{{language.reading.pages.fontFamily}}</div>
					<i class="material-icon">arrow_drop_down</i>
				</div>
			</div>

			<div class="simple-slider simple-slider-min-disables gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.fontSize}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="20">undo</i><span>{{_config.readingEbook.fontSize}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="68" min="10" value="{{_config.readingEbook.fontSize}}" onrange="reading.ebook.change('fontSize', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider simple-slider-min-disables reading-ebook-font-weight gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.fontWeight}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0">undo</i><span>{{_config.readingEbook.fontWeight}}</span></div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="900" min="0" step="100" value="{{_config.readingEbook.fontWeight}}" onrange="reading.ebook.change('fontWeight', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider simple-slider-min-disables gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.letterSpacing}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0">undo</i><span>{{normalizeNumber _config.readingEbook.letterSpacing "0.01"}}</span>x</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="0.5" min="-0.1" step="0.01" value="{{_config.readingEbook.letterSpacing}}" onrange="reading.ebook.change('letterSpacing', \{{value}}, \{{toEnd}})">
				</div>
			</div>


			<div class="simple-slider simple-slider-min-disables gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.wordSpacing}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0">undo</i><span>{{normalizeNumber _config.readingEbook.wordSpacing "0.04"}}</span>x</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="2" min="-0.4" step="0.04" value="{{_config.readingEbook.wordSpacing}}" onrange="reading.ebook.change('wordSpacing', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="menu-simple-separator-min"></div>

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.maxWidth}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="800" style="right: 70px;">undo</i><span>{{_config.readingEbook.maxWidth}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="3000" min="400" step="50" value="{{_config.readingEbook.maxWidth}}" onrange="reading.ebook.change('maxWidth', \{{value}}, \{{toEnd}})">
				</div>
			</div>


			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.marginHorizontal}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="40">undo</i><span>{{_config.readingEbook.minMargin}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="200" min="0" step="1" value="{{_config.readingEbook.minMargin}}" onrange="reading.ebook.change('minMargin', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.marginVertical}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="40">undo</i><span>{{_config.readingEbook.verticalMargin}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="200" min="0" step="1" value="{{_config.readingEbook.verticalMargin}}" onrange="reading.ebook.change('verticalMargin', \{{value}}, \{{toEnd}})">
				</div>
			</div>


			<div class="menu-simple-separator-min"></div>

			<div class="simple-slider simple-slider-min-disables gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.lineHeight}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="1.6">undo</i><span>{{normalizeNumber _config.readingEbook.lineHeight "0.05"}}</span>x</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="3" min="0.3" step="0.05" value="{{_config.readingEbook.lineHeight}}" onrange="reading.ebook.change('lineHeight', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider simple-slider-min-disables gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.paragraphLineHeight}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0.3">undo</i><span>{{normalizeNumber _config.readingEbook.pLineHeight "0.05"}}</span>x</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="3" min="0.3" step="0.05" value="{{_config.readingEbook.pLineHeight}}" onrange="reading.ebook.change('pLineHeight', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider simple-slider-min-disables gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.paragraphSpacing}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="4">undo</i><span>{{_config.readingEbook.pSpacing}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="200" min="-1" step="1" value="{{_config.readingEbook.pSpacing}}" onrange="reading.ebook.change('pSpacing', \{{value}}, \{{toEnd}})">
				</div>
			</div>


		</div>
		<div class="tabs-page-layout{{#compare readingPagesTab '==' 'page-layout'}} active{{/compare}}">

			<div class="menu-simple-text reading-view{{#if _config.readingWebtoon}} disable-pointer{{/if}}" style="padding-top: 8px; padding-bottom: 0px;">

				<div class="chip chip-big label-large chip-icon-left reading-view-slide gamepad-item{{#compare _config.readingView '==' 'slide'}} active{{/compare}}" onclick="reading.changePagesView(1, 'slide', false);">
					<div></div><i class="material-icon" onclick="">transition_slide</i> <span>{{language.reading.pages.slide}}</span>
				</div>

				<div class="chip chip-big label-large chip-icon-left reading-view-scroll gamepad-item{{#compare _config.readingView '==' 'scroll'}} active{{/compare}}" onclick="reading.changePagesView(1, 'scroll', false)">
					<div></div><i class="material-icon" onclick="">contract</i> <span>{{language.reading.pages.scroll}}</span>
				</div>

				<div class="chip chip-big label-large chip-icon-left chip-icon-right reading-view-rough-page-turn gamepad-item{{#compare _config.readingView '==' 'rough-page-turn'}} active{{/compare}}" onclick="reading.changePagesView(1, 'rough-page-turn', false)">
					<div></div><i class="material-icon" onclick="">import_contacts</i> <span>{{language.reading.pages.roughPageTurn}} ({{language.global.beta}})</span> <i class="material-icon right" onclick="reading.pageTransitions.configDialog(event, 'roughPageTurn')">settings</i>
				</div>

				<div class="chip chip-big label-large chip-icon-left chip-icon-right reading-view-smooth-page-turn gamepad-item{{#compare _config.readingView '==' 'smooth-page-turn'}} active{{/compare}}" onclick="reading.changePagesView(1, 'smooth-page-turn', false)">
					<div></div><i class="material-icon" onclick="">auto_stories</i> <span>{{language.reading.pages.smoothPageTurn}} ({{language.global.alpha}})</span> <i class="material-icon right" onclick="reading.pageTransitions.configDialog(event, 'smoothPageTurn')">settings</i>
				</div>

				<div class="chip chip-big label-large chip-icon-left reading-view-fade gamepad-item{{#compare _config.readingView '==' 'fade'}} active{{/compare}}" onclick="reading.changePagesView(1, 'fade', false)">
					<div></div><i class="material-icon" onclick="">transition_fade</i> <span>{{language.reading.pages.fade}}</span>
				</div>

			</div>

			<div class="menu-simple-text reading-page-sound-effect gamepad-item">
				{{language.reading.music.pageSoundEffect}}
				<div class="switch{{#if _config.readingSoundEffect.page.play}} a{{/if}}" on="reading.music.soundEffect.change('page', 'play', true)" off="reading.music.soundEffect.change('page', 'play', false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
				<i class="material-icon menu-simple-icon" onclick="reading.music.soundEffect.pageDialog()">settings</i>
			</div>

			<div class="menu-simple-separator-min"></div>
			<div class="menu-simple-text reading-reading-manga gamepad-item{{#if _config.readingWebtoon}} disable-pointer{{/if}}">
				{{language.reading.pages.readingManga}}
				<div class="switch{{#if _config.readingManga}} a{{/if}}" on="reading.changePagesView(8, true, false)" off="reading.changePagesView(8, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="menu-simple-text reading-reading-webtoon gamepad-item">
				{{language.reading.pages.readingWebtoon}}
				<div class="switch{{#if _config.readingWebtoon}} a{{/if}}" on="reading.changePagesView(9, true, false)" off="reading.changePagesView(9, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="menu-simple-separator-min"></div>
			<div class="menu-simple-text reading-double-page gamepad-item{{#if _config.readingWebtoon}} disable-pointer{{/if}}">
				{{language.reading.pages.doublePage}}
				<div class="switch{{#if _config.readingDoublePage}} a{{/if}}" on="reading.changePagesView(6, true, false)" off="reading.changePagesView(6, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="menu-simple-text reading-double-page-shadow gamepad-item{{#unless _config.readingDoublePage}} disable-pointer{{else if _config.readingWebtoon}} disable-pointer{{/unless}}">
				{{language.reading.doublePage.shadow.main}}
				<div class="switch{{#if _config.readingDoublePageShadow.active}} a{{/if}}" on="reading.doublePage.change('active', true);" off="reading.doublePage.change('active', false);">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
				<i class="material-icon menu-simple-icon" onclick="reading.doublePage.shadowDialog()">settings</i>
			</div>
			<div class="menu-simple-text reading-do-not-apply-to-horizontals gamepad-item{{#unless _config.readingDoublePage}} disable-pointer{{else if _config.readingWebtoon}} disable-pointer{{/unless}}">
				{{language.reading.pages.doNotApplyToHorizontals}}
				<div class="switch{{#if _config.readingDoNotApplyToHorizontals}} a{{/if}}" on="reading.changePagesView(7, true, false)" off="reading.changePagesView(7, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="menu-simple-text reading-align-with-next-horizontal gamepad-item{{#unless _config.readingDoublePage}} disable-pointer{{else if _config.readingWebtoon}} disable-pointer{{/unless}}">
				{{language.reading.pages.alignWithNextHorizontal}}
				<div class="switch{{#if _config.readingAlignWithNextHorizontal}} a{{/if}}" on="reading.changePagesView(21, true, false)" off="reading.changePagesView(21, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="menu-simple-text reading-blank-page gamepad-item{{#unless _config.readingDoublePage}} disable-pointer{{else if _config.readingWebtoon}} disable-pointer{{/unless}}">
				{{language.reading.pages.blankPage}}
				<div class="switch{{#if _config.readingBlankPage}} a{{/if}}" on="reading.changePagesView(12, true, false)" off="reading.changePagesView(12, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="menu-simple-separator-min"></div>
			<div class="menu-simple-text reading-ajust-to-width gamepad-item{{#compare _config.readingView '==' 'slide'}} disable-pointer{{else if _config.readingWebtoon}} disable-pointer{{/compare}}">
				{{language.reading.pages.adjustToWidth}}
				<div class="switch{{#if _config.readingViewAdjustToWidth}} a{{/if}}" on="reading.changePagesView(3, true, false)" off="reading.changePagesView(3, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="menu-simple-text reading-not-enlarge-more-than-original-size gamepad-item">
				{{language.reading.pages.notEnlargeMoreThanOriginalSize}}
				<div class="switch{{#if _config.readingNotEnlargeMoreThanOriginalSize}} a{{/if}}" on="reading.changePagesView(18, true, false)" off="reading.changePagesView(18, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="menu-simple-text reading-force-single-page gamepad-item{{#if _config.readingWebtoon}} disable-pointer{{else compare _config.readingView '!=' 'scroll'}} disable-pointer{{/if}}">
				{{language.reading.pages.forceSinglePage}}
				<div class="switch{{#if _config.readingForceSinglePage}} a{{/if}}" on="reading.changePagesView(20, true, false)" off="reading.changePagesView(20, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="reading-bookmark-title menu-simple-text-small">
				<span>{{language.reading.pages.rotate}}</span>
			</div>

			<div class="menu-simple-text reading-chips reading-rotate" style="height: 32px; padding-top: 8px; padding-bottom: 8px;">

				<div class="chip label-large chip-icon-left reading-rotate-left gamepad-item{{#compare _config.readingRotate '==' '1'}} active{{/compare}}" onclick="reading.changePagesView(22, 1, false);">
					<div></div><i class="icon-18 material-icon" onclick="">rotate_90_degrees_ccw</i> {{language.reading.pages.rotateLeft}}
				</div>

				<div class="chip label-large chip-icon-left reading-rotate-right gamepad-item{{#compare _config.readingRotate '==' '2'}} active{{/compare}}" onclick="reading.changePagesView(22, 2, false);">
					<div></div><i class="icon-18 material-icon" onclick="">rotate_90_degrees_cw</i> {{language.reading.pages.rotateRight}}
				</div>

				<div class="chip label-large chip-icon-left reading-rotate-upside-down gamepad-item{{#compare _config.readingRotate '==' '3'}} active{{/compare}}" onclick="reading.changePagesView(22, 3, false);">
					<div></div><i class="icon-18 material-icon" onclick="" style="transform: rotate(90deg);">rotate_90_degrees_cw</i> {{language.reading.pages.rotateUpsideDown}}
				</div>

			</div>

			<div class="reading-bookmark-title menu-simple-text-small">
				<span>{{language.reading.pages.rotateHorizontals}}</span>
			</div>

			<div class="menu-simple-text reading-chips reading-rotate-horizontals" style="height: 32px; padding-top: 8px; padding-bottom: 8px;">

				<div class="chip label-large chip-icon-left reading-rotate-left gamepad-item{{#compare _config.readingRotateHorizontals '==' '1'}} active{{/compare}}" onclick="reading.changePagesView(19, 1, false);">
					<div></div><i class="icon-18 material-icon" onclick="">rotate_90_degrees_ccw</i> {{language.reading.pages.rotateLeft}}
				</div>

				<div class="chip label-large chip-icon-left reading-rotate-right gamepad-item{{#compare _config.readingRotateHorizontals '==' '2'}} active{{/compare}}" onclick="reading.changePagesView(19, 2, false);">
					<div></div><i class="icon-18 material-icon" onclick="">rotate_90_degrees_cw</i> {{language.reading.pages.rotateRight}}
				</div>

				<div class="chip label-large chip-icon-left reading-rotate-upside-down gamepad-item{{#compare _config.readingRotateHorizontals '==' '3'}} active{{/compare}}" onclick="reading.changePagesView(19, 3, false);">
					<div></div><i class="icon-18 material-icon" onclick="" style="transform: rotate(90deg);">rotate_90_degrees_cw</i> {{language.reading.pages.rotateUpsideDown}}
				</div>

			</div>

			<div class="menu-simple-separator-min"></div>

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.marginHorizontal}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="16">undo</i><span>{{_config.readingMargin.left}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="{{config.readingMaxMargin}}" min="0" list="marginlist" value="{{_config.readingMargin.left}}" onrange="reading.changePagesView(10, \{{value}}, \{{toEnd}})">
				</div>
			</div>
			<div class="simple-slider gamepad-item reading-margin-vertical{{#if _config.readingWebtoon}} disable-pointer{{/if}}" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)">
				<div class="simple-slider-text">{{language.reading.pages.marginVertical}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="16">undo</i><span>{{_config.readingMargin.top}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="{{config.readingMaxMargin}}" min="0" list="marginlist" value="{{_config.readingMargin.top}}" onrange="reading.changePagesView(11, \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="menu-simple-text gamepad-item">
				{{language.reading.pages.differentMarginInHorizontals}}
				<div class="switch{{#if _config.readingHorizontalsMarginActive}} a{{/if}}" on="reading.changePagesView(13, true, false)" off="reading.changePagesView(13, false, false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="simple-slider reading-horizontals-margin gamepad-item{{#unless _config.readingHorizontalsMarginActive}} disable-pointer{{/unless}}" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.marginHorizontal}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="16">undo</i><span>{{_config.readingHorizontalsMargin.left}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="{{config.readingMaxMargin}}" min="0" list="marginlist" value="{{_config.readingHorizontalsMargin.left}}" onrange="reading.changePagesView(14, \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<!--<div class="simple-slider reading-horizontals-margin gamepad-item{{#unless _config.readingHorizontalsMarginActive}} disable-pointer{{/unless}}" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)">
				<div class="simple-slider-text">{{language.reading.pages.marginVertical}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="16">remove_circle</i><span>{{_config.readingHorizontalsMargin.top}}</span>px</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="{{config.readingMaxMargin}}" min="0" list="marginlist" value="{{_config.readingHorizontalsMargin.top}}" onrange="reading.changePagesView(15, \{{value}}, \{{toEnd}})">
				</div>
			</div>-->

			<div class="menu-simple-separator-min"></div>

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.clipHorizontal}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0">undo</i><span>{{normalizeNumber _config.readingImageClip.left "0.05"}}</span>%</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="15" min="0" step="0.05" value="{{_config.readingImageClip.left}}" onrange="reading.changePagesView(16, \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.clipVertical}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0">undo</i><span>{{normalizeNumber _config.readingImageClip.top "0.05"}}</span>%</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="15" min="0" step="0.05" value="{{_config.readingImageClip.top}}" onrange="reading.changePagesView(17, \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="menu-simple-separator-min"></div>
			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)">
				<div class="simple-slider-text">{{language.reading.pages.readingDelaySkip}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="1">undo</i><span>{{normalizeNumber _config.readingDelayComicSkip "0.1"}}</span>s</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="10" min="0" step="0.1" value="{{_config.readingDelayComicSkip}}" onrange="reading.changePagesView(5, \{{value}}, \{{toEnd}})">
				</div>
			</div>
			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)">
				<div class="simple-slider-text">{{language.reading.pages.animationSpeed}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0.3">undo</i><span>{{normalizeNumber _config.readingViewSpeed "0.05"}}</span>s</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input  type="range" max="4" min="0" step="0.05" value="{{_config.readingViewSpeed}}" onrange="reading.changePagesView(4, \{{value}}, \{{toEnd}})">
				</div>
			</div>
		</div>

		<div class="tabs-filters{{#compare readingPagesTab '==' 'filters'}} active{{/compare}}">

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.brightness}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="100">format_color_reset</i><span>{{_config.readingFilters.brightness}}</span>%</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="400" min="0" value="{{_config.readingFilters.brightness}}" onrange="reading.filters.change('brightness', \{{value}}, \{{toEnd}})">
				</div>
			</div>


			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.saturation}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="100">format_color_reset</i><span>{{_config.readingFilters.saturation}}</span>%</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="400" min="0" value="{{_config.readingFilters.saturation}}" onrange="reading.filters.change('saturation', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.contrast}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="100">format_color_reset</i><span>{{_config.readingFilters.contrast}}</span>%</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="400" min="0" value="{{_config.readingFilters.contrast}}" onrange="reading.filters.change('contrast', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.sepia}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0">format_color_reset</i><span>{{_config.readingFilters.sepia}}</span>%</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="100" min="0" value="{{_config.readingFilters.sepia}}" onrange="reading.filters.change('sepia', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="simple-slider gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
				<div class="simple-slider-text">{{language.reading.pages.hueRotate}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0">format_color_reset</i><span>{{_config.readingFilters.hueRotate}}</span>°</div></div>
				<div class="range">
					<div class="range-position">
						<span class="range-line" style="width: 100%"></span>
						<span class="range-steps"></span>
						<div>
							<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
						</div>
					</div>
					<input type="range" max="360" min="0" value="{{_config.readingFilters.hueRotate}}" onrange="reading.filters.change('hueRotate', \{{value}}, \{{toEnd}})">
				</div>
			</div>

			<div class="menu-simple-text reading-invert gamepad-item">
				{{language.reading.pages.invert}}
				<div class="switch{{#if _config.readingFilters.invert}} a{{/if}}" on="reading.filters.change('invert', true, true)" off="reading.filters.change('invert', false, true)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="menu-simple-text reading-negative gamepad-item">
				{{language.reading.pages.negative}}
				<div class="switch{{#if _config.readingFilters.negative}} a{{/if}}" on="reading.filters.change('negative', true, true)" off="reading.filters.change('negative', false, true)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="menu-simple-separator-min"></div>


			<div class="menu-simple-text reading-colorize gamepad-item">
				{{language.reading.pages.colorize}}
				<div class="switch{{#if _config.readingFilters.colorize}} a{{/if}}" on="reading.filters.change('colorize', true, true)" off="reading.filters.change('colorize', false, true)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="menu-simple-text reading-only-black-and-white gamepad-item{{#unless _config.readingFilters.colorize}} disable-pointer{{/unless}}">
				{{language.reading.pages.onlyBlackAndWhite}}
				<div class="switch{{#if _config.readingFilters.onlyBlackAndWhite}} a{{/if}}" on="reading.filters.change('onlyBlackAndWhite', true, true)" off="reading.filters.change('onlyBlackAndWhite', false, true)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>
			<div class="filters-colors{{#unless _config.readingFilters.colorize}} disable-pointer{{/unless}}">

				<div class="select reading-filters-presets body-large gamepad-item" onclick="reading.filters.loadFiltersPresets(); events.showSelect(this, 'reading-filters-presets', true);">
					<div>
						<div class="select-border">
							<div class="bottom"><div></div></div>
						</div>
						<div class="text">{{readingFiltersPreset}}</div>
						<div class="placeholder">{{language.reading.pages.colorPreset}}</div>
						<i class="material-icon">arrow_drop_down</i>
					</div>
				</div>

				<div class="filters-colorize-gradient">
					<div></div>
					<span style="filter: {{readingFiltersCss}}"></span>
				</div>
				<div class="filters-colors-list">
					{{> reading.elements.menus.pages.filters.html}}
				</div>

				<div class="filters-buttons">
					<div class="simple-button filled-tonal gamepad-item" onclick="reading.filters.add();">
						<div class="touch-effect"><i class="icon-24 material-icon">add</i>{{language.reading.pages.addColor}}</div>
					</div>

					<div class="simple-button filled-tonal gamepad-item" onclick="reading.filters.fromImage();">
						<div class="touch-effect"><i class="icon-24 material-icon">image</i>{{language.reading.pages.fromImage}}</div>
					</div>

					<div class="simple-button filled-tonal gamepad-item" onclick="reading.filters.saveAsPreset();">
						<div class="touch-effect"><i class="icon-24 material-icon">save</i>{{language.reading.pages.saveAsPreset}}</div>
					</div>
				</div>

			</div>
		</div>

		<div class="tabs-ai{{#compare readingPagesTab '==' 'ai'}} active{{/compare}}">

			<div class="ai-sample-images">
				<img src="../images/assets/ai-artifact-removal-input.webp">
				<img src="../images/assets/ai-artifact-removal-output.webp">
			</div>

			<div class="menu-simple-text reading-ai-artifact-removal-active gamepad-item">
				{{language.reading.pages.aiArtifactRemoval}}
				<div class="switch{{#if _config.readingAi.artifactRemoval.active}} a{{/if}}" on="reading.ai.change('artifactRemoval', 'active', true)" off="reading.ai.change('artifactRemoval', 'active', false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="ai-artifact-removal{{#unless _config.readingAi.artifactRemoval.active}} disable-pointer{{/unless}}">

				<div class="select reading-ai-artifact-removal-models body-large gamepad-item" onclick="reading.ai.loadModels('artifactRemoval'); events.showSelect(this, 'reading-ai-artifact-removal-models', true);">
					<div>
						<div class="select-border">
							<div class="bottom"><div></div></div>
						</div>
						<div class="text">{{readingArtifactRemovalModel}}</div>
						<div class="placeholder">{{language.reading.pages.aiModel}}</div>
						<i class="material-icon">arrow_drop_down</i>
					</div>
				</div>

			</div>

			<div class="menu-simple-separator-min"></div>

			<div class="ai-sample-images">
				<img src="../images/assets/ai-descreen-input.webp" style="image-rendering: pixelated;">
				<img src="../images/assets/ai-descreen-output.webp">
			</div>

			<div class="menu-simple-text reading-ai-descreen-active gamepad-item">
				{{language.reading.pages.aiDescreen}}
				<div class="switch{{#if _config.readingAi.descreen.active}} a{{/if}}" on="reading.ai.change('descreen', 'active', true)" off="reading.ai.change('descreen', 'active', false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="ai-descreen{{#unless _config.readingAi.descreen.active}} disable-pointer{{/unless}}">

				<div class="select reading-ai-descreen-models body-large gamepad-item" onclick="reading.ai.loadModels('descreen'); events.showSelect(this, 'reading-ai-descreen-models', true);">
					<div>
						<div class="select-border">
							<div class="bottom"><div></div></div>
						</div>
						<div class="text">{{readingDescreenModel}}</div>
						<div class="placeholder">{{language.reading.pages.aiModel}}</div>
						<i class="material-icon">arrow_drop_down</i>
					</div>
				</div>

			</div>

			<div class="menu-simple-separator-min"></div>

			<div class="ai-sample-images">
				<img src="../images/assets/ai-upscale-input.webp" style="image-rendering: pixelated;">
				<img src="../images/assets/ai-upscale-output.webp">
			</div>

			<div class="menu-simple-text reading-ai-upscale-active gamepad-item">
				{{language.reading.pages.aiUpscale}}
				<div class="switch{{#if _config.readingAi.upscale.active}} a{{/if}}" on="reading.ai.change('upscale', 'active', true)" off="reading.ai.change('upscale', 'active', false)">
					<div></div>
					<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
				</div>
			</div>

			<div class="ai-upscale{{#unless _config.readingAi.upscale.active}} disable-pointer{{/unless}}">

				<div class="select reading-ai-upscale-models body-large gamepad-item" onclick="reading.ai.loadModels('upscale');; events.showSelect(this, 'reading-ai-upscale-models', true);">
					<div>
						<div class="select-border">
							<div class="bottom"><div></div></div>
						</div>
						<div class="text">{{readingUpscaleModel}}</div>
						<div class="placeholder">{{language.reading.pages.aiModel}}</div>
						<i class="material-icon">arrow_drop_down</i>
					</div>
				</div>

				<div class="simple-slider reading-ai-upscale-max-megapixels gamepad-item" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
					<div class="simple-slider-text">{{language.reading.pages.maxMegapixels}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="1" style="right: 80px;">undo</i><span>{{normalizeNumber _config.readingAi.upscale.maxMegapixels "0.1"}}</span>mpx</div></div>
					<div class="range">
						<div class="range-position">
							<span class="range-line" style="width: 100%"></span>
							<span class="range-steps"></span>
							<div>
								<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
							</div>
						</div>
						<input type="range" max="6" min="0.2" step="0.1" value="{{_config.readingAi.upscale.maxMegapixels}}" onrange="reading.ai.change('upscale', 'maxMegapixels', \{{value}}, \{{toEnd}})">
					</div>
				</div>

				<div class="menu-simple-text gamepad-item">
					{{language.reading.pages.autoScale}}
					<div class="switch{{#if _config.readingAi.upscale.autoScale}} a{{/if}}" on="reading.ai.change('upscale', 'autoScale', true)" off="reading.ai.change('upscale', 'autoScale', false)">
						<div></div>
						<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
					</div>
				</div>

				<div class="simple-slider reading-ai-upscale-scale gamepad-item{{#if _config.readingAi.upscale.autoScale}} disable-pointer{{/if}}" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
					<div class="simple-slider-text">{{language.reading.pages.scale}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="4">undo</i><span>{{readingUpscaleScale.scale}}</span>x</div></div>
					<div class="range">
						<div class="range-position">
							<span class="range-line" style="width: 100%"></span>
							<span class="range-steps"></span>
							<div>
								<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
							</div>
						</div>
						<input type="range" max="{{readingUpscaleScale.max}}" min="{{readingUpscaleScale.min}}" step="{{readingUpscaleScale.step}}" data-single-percent="100" value="{{readingUpscaleScale.scale}}" onrange="reading.ai.change('upscale', 'scale', \{{value}}, \{{toEnd}})">
					</div>
				</div>

				<div class="simple-slider reading-ai-upscale-noise gamepad-item{{#unless readingUpscaleNoise.compatible}} disable-pointer{{/unless}}" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)" style="margin-top: 8px;">
					<div class="simple-slider-text">{{language.reading.pages.noiseReduction}}<div><i class="material-icon slider-reset" onclick="events.resetRange(this)" data-default="0">undo</i><span>{{readingUpscaleNoise.noise}}</span></div></div>
					<div class="range">
						<div class="range-position">
							<span class="range-line" style="width: 100%"></span>
							<span class="range-steps"></span>
							<div>
								<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
							</div>
						</div>
						<input type="range" max="{{readingUpscaleNoise.max}}" min="{{readingUpscaleNoise.min}}" step="{{readingUpscaleNoise.step}}" data-single-percent="100" value="{{readingUpscaleNoise.noise}}" onrange="reading.ai.change('upscale', 'noise', \{{value}}, \{{toEnd}})">
					</div>
				</div>


			</div>

			<!-- <div class="menu-simple-separator-min"></div> -->

		</div>

	</div>
</div>